<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- Meta, title, CSS, favicons, etc. -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>支付页面 </title>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- Font Awesome -->
		<link href="css/font-awesome.min.css" rel="stylesheet">
		<!-- NProgress -->

		<!-- Custom Theme Style -->
		<link href="css/custom.min.css" rel="stylesheet">
	</head>

	<body class="nav-md">
		<div class="container body">
			<div class="main_container">
				<div id="head">
						</div>

				<!-- top navigation -->
			
				<!-- /top navigation -->

				<!-- page content -->
				<div class="right_col" role="main">
					<div class="">
						<div class="page-title">
							<div class="title_left">
								<h3 style="color: green;">支付页面</h3>
							</div>

							<div class="title_right">
								<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">

								</div>
							</div>
						</div>
						<div class="clearfix"></div>

						<div class="row">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<div class="x_panel">
									<div class="x_title">

										<div class="clearfix" style="text-align: center;"><span style="font-size: 25px;color: red;">请仔细核对订单内容,确认无误后提交</span></div>
									</div>
									<div class="x_content">

										<form class="form-horizontal form-label-left" novalidate> 


											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="WIDout_trade_no">订单编号 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input id="WIDout_trade_no" class="form-control col-md-7 col-xs-12" data-validate-length-range="6"
													 name="WIDout_trade_no" readonly="readonly" value="" type="text">
												</div>
											</div>
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="WIDsubject">用户名 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input type="tel" id="WIDsubject" name="WIDsubject" readonly="readonly" value="" class="form-control col-md-7 col-xs-12">
												</div>
											</div>
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="WIDtotal_amount">运费 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<input type="text" id="WIDtotal_amount" name="WIDtotal_amount"  data-validate-linked="email"
													 readonly="readonly" value="" class="form-control col-md-7 col-xs-12">
												</div>
											</div>
											
											<div class="item form-group">
												<label class="control-label col-md-3 col-sm-3 col-xs-12" for="textarea">请选择支付方式 <span class="required">*</span>
												</label>
												<div class="col-md-6 col-sm-6 col-xs-12">
													<select>
														<option value="">支付宝</option>
														<option value="">微信</option>
													</select>
												</div>
											</div>
											
											
											
											<div class="ln_solid"></div>
											<div class="form-group">
												<div class="col-md-6 col-md-offset-3">
													<button type="button" class="btn btn-primary" onclick="window.history.back(-1)">返回</button>
													<a class="btn btn-success" id="pay1">立即支付</a>
													<!-- 1111 -->
													<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                    <div class="modal-dialog modal-sm">
                      <div class="modal-content">

                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
                          </button>
                          <h4 class="modal-title" id="myModalLabel2">支付窗口</h4>
                        </div>
                        <div class="modal-body">
							<div class="item form-group">
								<label class="control-label col-md-3 col-sm-3 col-xs-12" for="textareaqew">
								</label>
								<img src="images/20190105101405.jpg" width="260px" style="margin-left: 5px;"/>
							</div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>

                      </div>
                    </div>
                  </div>
													  <!-- 1111 -->
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /page content -->

				<!-- footer content -->
				<footer>
					<div class="pull-right">
						Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
					</div>
					<div class="clearfix"></div>
				</footer>
				<!-- /footer content -->
			</div>
		</div>

		<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js"></script>
		<!-- FastClick -->
		<script src="js/fastclick.js"></script>
		<!-- NProgress -->
		<script src="js/nprogress.js"></script>
		<!-- validator -->
		<script src="js/validator.js"></script>



		<!-- Custom Theme Scripts -->

		<!-- validator -->
		<script>
			
			
				$(document).ready(function(){
					$("#head").load("head.html");
				});
			// initialize the validator function
			validator.message.date = 'not a real date';

			// validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
			$('form')
				.on('blur', 'input[required], input.optional, select.required', validator.checkField)
				.on('change', 'select.required', validator.checkField)
				.on('keypress', 'input[required][pattern]', validator.keypress);

			$('.multi.required').on('keyup blur', 'input', function() {
				validator.checkField.apply($(this).siblings().last()[0]);
			});

			$('form').submit(function(e) {
				e.preventDefault();
				var submit = true;

				// evaluate the form using generic validaing
				if (!validator.checkAll($(this))) {
					submit = false;
				}

				if (submit)
					this.submit();

				return false;
			});
                var $token=window.sessionStorage.getItem('token');
                var url = window.location.href;
                var $id = url.split("=")[1];
                $.ajax({
                    type:"post",
                    xhrFields:{withCredentials:true},
                    url:"http://localhost:8081/OrderController/topay",
                    data:{"token":$token,"id":$id},
                    success:function (data) {
                        var WIDout_trade_no = $("#WIDout_trade_no").val(data.orderNumber);
                        var WIDsubject = $("#WIDsubject").val(data.senderName);
                        var WIDtotal_amount = $("#WIDtotal_amount").val(data.money);
                    },
                    error:function(){
                        alert("加载异常");
                    }
                })
                $(document).on("click","#pay1",function () {
					var WIDout_trade_no = $("#WIDout_trade_no").val();
					var WIDsubject = $("#WIDsubject").val();
					var WIDtotal_amount = $("#WIDtotal_amount").val();
                    $.ajax({
                        type:"post",
                        xhrFields:{withCredentials:true},
                        url:"http://localhost:8081/OrderController/alipay",
                        data:{"token":$token,"WIDout_trade_no":WIDout_trade_no,"WIDsubject":WIDtotal_amount,"WIDtotal_amount":WIDtotal_amount,"WIDbody":""},
                        success:function (data) {
							$("body").children(":first").before($(data));
                        },
                        error:function(){
                            alert("支付异常");
                       }
                    })
                })

		</script>
		<!-- /validator -->
	</body>
</html>
